<template>
    <div>
        <h1 class="title">Create Your New Blog</h1>
        <button @click="goBack" class="btn1">RETURN</button>
        <form @submit.prevent="createPost">
            <div>
                <label for="title" class="front">Title</label>
                <input type="text" id="title" class="txt0" v-model="title" required>
            </div>
            <div>
                <label for="content" class="front">Content</label>
                <textarea class="txt7" id="content" v-model="content" required></textarea>
            </div>
            <button type="submit" class="btn">CREATE</button>
        </form>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    data() {
        return {
            title: '',
            content: '',
            userid:''
        };
    },
    methods: {
        goBack(){
            this.$router.go (-1)
        },
        createPost() {
            const post = {
                title: this.title,
                content: this.content
            };
            axios.post('/api/posts', post)
                .then(response => {
                    console.log(response.data);
                    this.title = '';
                    this.content = '';
                    alert("创建成功")
                    this.$router.replace({ path: "/user/postList" });
                })
                .catch(error => {
                    console.log(error);
                });
        },
    }
};
</script>

<style>

.front{
    font-size: 15px;
    font-weight: bolder;
}
textarea{
    color:#2c3e50;
    font-size: 15px;
    font-weight: bold;
}
.txt0{
    color:#2c3e50;
    font-size: 15px;
    font-weight: bold;
    width: 215px;
    height: 25px;
    outline: none;
    border:2px solid #000000;
    border-radius: 5px;
    background:transparent;
}
.txt7{
    margin-top: 12px;
    width: 425px;
    height: 215px;
    outline: none;
    border:2px solid #000000;
    border-radius: 5px;
    background:transparent;
}
.btn{
    width:65px;
    height: 35px;
    background:radial-gradient(ellipse at center,#73f219,#d1d2d4,#000000);
    border-radius: 5px;
}
.btn:hover{
    cursor: pointer;
    background: radial-gradient(ellipse at center,#d1d2d4,#73f219,#000000);
}
</style>